import React, { Component } from "react";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { connect } from "react-redux";
import Card from "./card";
import {
	setSelectedBankCard,
	setSelectedBankList,
	getSelectedBankList
} from "../../../../Redux/Action/bank/bank";
import "./index.scss";
const BankIcon = require("../../../../images/icon/addBank.png");

@connect(
	state => ({
		selectedBankList: state.bankReducer.selectedBankList,
		repaymentMoney: state.repaymentMoney
	}),
	dispatch => ({
		setSelectedBankCard: value => dispatch(setSelectedBankCard(value)),
		setSelectedBankList: list => dispatch(setSelectedBankList(list)),
		getSelectedBankList: value => dispatch(getSelectedBankList(value))
	})
)
class BankList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			channelCode: "ll"
		};
	}
	componentDidMount = () => {
		const { channelCode } = this.state;
		const { selectedBankList, getSelectedBankList } = this.props;
		if (selectedBankList.length) return;
		getSelectedBankList({
			channelCode
		});
	};
	chooseBank = value => {
		if (this.props.repaymentMoney.type == "pay") {
			if (value.dayAmount - 0 < this.props.repaymentMoney.totalLoanFee - 0) {
				return false;
			}
		}
		this.props.setSelectedBankCard(value.cardNo);
		setTimeout(() => {
			this.props.history.goBack();
		}, 0);
	};
	addBank = () => {
		this.props.history.push(`/addBank?from=01`);
	};
	render() {
		const { selectedBankList } = this.props;
		const _pageParams = {
			header: {
				title: "银行卡"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bank-list-container">
					{selectedBankList.map(item => (
						<Card
							item={item}
							payMonery={this.props.repaymentMoney.totalLoanFee}
							onClick={this.chooseBank}
							key={Math.random()}
							type={this.props.repaymentMoney.type}
						/>
					))}
					<img
						src={BankIcon}
						alt=""
						onClick={this.addBank}
						className="add-icon"
					/>
				</div>
			</MainLayout>
		);
	}
}

export default BankList;
